<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2：事件绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h1>知识点1：v-on指令：鼠标单击事件</h1>
        <p>我已经被你点了{{num}}次</p>
        <button v-on:click = "num++">点我点我快点我</button>
        <button v-on:click = "num--">再点我我就删掉你</button>
        <h3>许多事件处理逻辑会更加复杂，直接把复杂的代码写在插值表达式里面不合适
            所以，对于复杂事件，可以把代码放在方法中，然后进行调用
        </h3>
        <button v-on:click = "logInfo()">打印消息</button>
        <button v-on:click = "logInfo('我是宇宙中最好的消息')">带参数打印消息</button>
        <h3>我们可以把v-on 简写成 @</h3>
        <button @click = "logInfo('我最爱的是学习')">打印</button>
        <h1>知识点2：键盘事件 keydown(按下) keyup(释放按键)</h1>
        <input type="text" @keydown="show('我被按下了，救救我')">
        <input type="text" @keydown="show('太好了')">
        <h1>知识点3：其他事件 dbclick双击事件，contextmenu 右击事件，
            mouseover鼠标上移事件，mouseout鼠标移开事件</h1>
        <button v-on:dblclick = "num++">双击</button>
        <p>双击了{{num}}次</p>
        <button v-on:contextmenu = "num++">右击</button>
        <button @mouseover = "num++">鼠标上移</button>
        <button @mouseout = "num++">鼠标移开</button>
        <h1>知识点4：事件修饰符</h1>
        <h3>1.    .once   表示该事件只能被点击一次</h3>
        <button @click.once="num++">相信我，你只能点一次</button>{{num}}
        <h3>2.   .prevent 当事件触发时，阻止元素默认的行为</h3>
        <h4>submit有一个默认的行为，提交后会重新加载页面，通过prevent可以组织该默认行为</h4>
        <form @submit="handle()">
            <h5>不使用修饰符</h5>
            <button type="submit">提交</button>
        </form>
        <form @submit.prevent="handle()">
            <h5>使用修饰符</h5>
            <button type="submit">提交</button>
        </form>
        <h3>3.   .stop 阻止冒泡</h3>
        <h4>冒泡是内部元素事件被触发后，继续向外层触发事件</h4>
        <div id="box1" @click="box('box1')">box1
            <div id="box2" @click="box('box2')">box2
                <div id="box3" @click.stop="box('box3')">box3
                </div>
            </div>
        </div>
        <h3>4.  .capture  事件捕获</h3>
        <h4>如果我们在层叠事件中要先执行某个事件可以使用capture修饰符
            当内部元素触发时，先处理capture事件修饰的事件，
            然后再提交当前事件执行，捕获由外到内
        </h4>
        <div id="box1" @click.capture="box('box1')">box1
            <div id="box2" @click="box('box2')">box2
                <div id="box3" @click.stop="box('box3')">box3
                </div>
            </div>
        </div>
        <h3>5.    .self   只在绑定了事件的那个对象层中使用</h3>
        <div id="box1" @click="box('box1')">box1
            <div id="box2" @click.self.stop="box('box2')">box2
                <div id="box3" @click="box('box3')">box3
                </div>
            </div>
        </div>
        <h3>6.监听键盘事件的按键修饰符</h3>
        <p>.enter  .tab   .delete(监听删除和退格)   .esc   .space   .up   .down   .left  
            .right   .ctrl  .shift  .alt  .meta(windows徽标键)
        </p>
        <h4>alt + c  验证当键盘按下这两个键时才反应</h4>
        <input type="text" @keyup.alt.c = "show('我按下了alt+c')">
        <input type="text" @keyup.enter = "show('我按下了enter')">
        <h3>7. 鼠标修饰符</h3>
        <p>
            .left   .right   .middle  
        </p>
    </div>
    
</body>

</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                num:0
            }
        },
        methods: {
            logInfo(val){
                console.log(val || "世界上の好消息");
            },
            show(val){
                console.log(val);
            },
            box(val){
                alert(val)
            }

        },
    }).mount("#app")
</script>
<style>
    #box1{
        height: 200px;
        width: 300px;
        background-color: #360404;
    }
    #box2{
        height: 150px;
        width: 250px;
        background-color: #720d0d;
    }
    #box3{
        height: 100px;
        width: 200px;
        background-color: #e22a2a;
    }
</style>